@import "mixins", "foundation","normalize";
$colorNectar: #FF9326;
$colorUno: #999;
$colorDos: #444;
$fzUno: 1.5em;
$fzDos: 2em;

*::selection {
	background: rgba(255, 147, 38, 0.8);
        color: #FFF;
}
*::-moz-selection {
	background: $colorNectar;
        color: #FFF;
}

html, body{
    height: 100%;
    -webkit-font-smoothing: antialiased;
}
body{
    font-family: 'PT Serif', serif;
    background-color: #fafafa;
    color: $colorDos;
}
.center-align{
    text-align: center;
    @include verticalAlign();
}
.large-title{font-size: $fzDos !important; color: $colorDos;}
.mb-20{
    margin-bottom: 10px !important;
}
.mb-40{
    margin-bottom: 20px !important;
}
.mb-60{
    margin-bottom: 30px !important;
}
.mb-70{
    margin-bottom: 35px !important;
}
.mb-90{
    margin-bottom: 45px !important;
}


/*LOGO N3CTAR*/

.brand-logo{
    width: 72px;
    height: 50px;
    float: left;
    background-color: $colorNectar;
    background-image: url('../img/logo-nectar.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 60%;
    a{
        display: block;
        width: 100%;
        height: 100%;
        text-indent: -9999px;
    }
}

/*NAV*/
header{
    position: fixed;
    right: 0;
    left: 0;
    top: 0;
    height: 50px;
    z-index: 10;
    background-color: rgba(255, 255, 255, 0.95);


    #toggle-menu{
        display: block;
        float: right;
        height: 50px;
        width: 40px;
        line-height: 50px;
        font-size: 21px;
        color: $colorDos;
        text-align: center;
        @include transition(0.15s);
        &:hover{
            color: $colorNectar;
        }
    }

    nav{
        position: fixed;
        right: 0;
        top: 50px;
        bottom: 0;
        margin-right: -250px;
        width: 250px;
        background-color: #FFF;
        @include transition(0.3s);
        @include boxShadow(0px 10px 7px -10px rgba(0,0,0,0.2) inset);
        ul{
            margin: 0;
            padding: 5px 0 0 0;
            list-style: none;
            li{
                border-bottom: 1px solid #F0F0F0;
           }
            a{
                display: block;
                height: 50px;
                line-height: 50px;
                color: $colorDos;
                &:hover{color: $colorNectar;}
                i.fa{
                    display: inline-block;
                    width: 50px;
                    height: 50px;
                    line-height: 50px;
                    text-align: center;
                    font-size: 1.5em;
                    vertical-align: top;
                }
                span{
                    display: inline-block;
                    line-height: 50px;
                    height: 50px;
                    vertical-align: top;
                }
            }
        }
        .contact{
            .dropdown{
                display: none;
                height: 50px;
                line-height: 50px;
                width: 55px;
                font-size: 1.5em;
                color: $colorDos;
                text-align: center;
                &:hover{color: $colorNectar;}
            }
            h5{
                font-family: 'PT Serif', serif;
                font-size: 1em;
                margin: 0;
                i{
                    display: inline-block;
                    width: 50px;
                    height: 50px;
                    line-height: 50px;
                    vertical-align: top;
                    text-align: center;
                    font-size: 1.5em;
                    color: $colorDos;
                }
                span{
                    display: inline-block;
                    height: 50px;
                    line-height: 50px;
                    vertical-align: top;
                }
            }
            .f-dropdown{
                left: 0;
                right: 0;
                margin-top: 0;
                padding: 0 15px;
                border: none;
                max-width: none;
                p{
                    line-height: 1.4em;
                    margin: 0;
                    font-size: 1em;
                    font-weight: 400;}
                a{
                    line-height: 1.4em;
                    font-weight: 400;
                    color: $colorDos;
                }
                .group{
                    padding: 5px 0;
                }
                .social{
                    a{
                        font-size: 1.5em;
                        color: #999;
                        &:hover{color: #000;}
                    }
                }
                &:before, &:after{
                    content: none;
                }
            }
            #hover-show-c{
                display: none;
            }
        }
        #hover-show{
            display: none;
        }
    }
}
.overlay{
    position: fixed;
    background-color: rgba(0,0,0,0.5);
    display: none;
    top: 50px;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9;
}
body.off-canvas-on{
    header{
        nav{
            margin-right: 0;
        }
    }
}

body.modal-on{
    header{
        background-color: rgba(255, 255, 255, 1);
    }
}

/*CIRCLE*/
.circle{
    width: 100px;
    height: 100px;
    @include borderRadius(50%);
    background-color: #eee;
    display: inline-block;
    margin: 0 10px;
    overflow: hidden;
    background-color: #000;
    @include transition(0.2s, border);
    img{
        opacity: 1;
        width: 100%;
        height: auto;
    }
    &:hover{
        border: 3px solid $colorNectar;
    }
}

/*HOME BULLETS*/
.bullets{
    display: none;
    position: fixed;
    right: 0;
    top: 50%;
    margin-top: -160px;
    background-color: #FFF;
    z-index: 5;
    -webkit-border-top-left-radius: 8px;
    -webkit-border-bottom-left-radius: 8px;
    -moz-border-radius-topleft: 8px;
    -moz-border-radius-bottomleft: 8px;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;

    a{
        display: block;
        height: 40px;
        width: 40px;
        padding: 14px;
        .bullet{
            height: 12px;
            width: 12px;
            background-color: $colorUno;
            @include borderRadius(50%);
            @include transition(0.15s);
        }
        &:hover .bullet{
            background-color: $colorNectar;
        }
        &.active .bullet{
            background-color: $colorNectar;
        }
    }
    ul{
        list-style: none;
        margin: 0;
        padding: 7px 0;
    }
}

// ARROWS

.arrow{
        position: fixed;
        width: 100%;
        line-height: 60px;
				font-size: 20px;
				z-index: 50;
        text-align: center;
        color: $colorUno;
				display: none;
				opacity: 1;
        @include transition(0.3s);

				&:hover {
					color: $colorNectar;
				}
    }
    .down {
        bottom: 0px;
    }
    .up {
        top: 60px;
    }
.curr-1 .up {
	opacity: 0;
}
.curr-8 .down {
	opacity: 0;
}

/* LOADER */
.has-load{
    display: none;
}
.loader{
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -8px;
    margin-left: -8px;
}

/*SECTIONS*/
.slides{
    padding: 60px 0;
    .slide{
        padding: 70px 15px;
        width: 100%;
    }
}
section[class*='block-']{
    text-align: center;
    width: 100%;
    z-index: 2;
    top: 0;
    padding: 0 5%;
    background-color: #fafafa;
    @include transition (1s, opacity);
    img{
        display: block;
        margin: 0 auto;
        width: 100%;
    }
    p{
        font-size: $fzUno;
        max-width: 620px;
        margin: 0 auto;
    }
    &.active{
        opacity: 1;
        z-index: 3;
    }
}
/*FIST BLOCK*/
.block-1{
    p{
        color: $colorUno;
        a{
            color: $colorUno;
            &:hover{
                color: $colorDos;
            }
        }
    }
}

.animated {
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 4s;
  -moz-animation-duration: 4s;
  -ms-animation-duration: 4s;
  -o-animation-duration: 4s;
  animation-duration: 4s;
}

// BOUNCE DOWN
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); }
  40% { -webkit-transform: translateY(-15px); }
  60% { -webkit-transform: translateY(-10px); }
}

@-moz-keyframes bounce {
  0%, 20%, 50%, 80%, 100% { -moz-transform: translateY(0); }
  40% { -moz-transform: translateY(-30px); }
  60% { -moz-transform: translateY(-15px); }
}

@-o-keyframes bounce {
  /* line 406, ../sass/_style.scss */
  0%, 20%, 50%, 80%, 100% { -o-transform: translateY(0); }
  40% { -o-transform: translateY(-30px); }
  60% { -o-transform: translateY(-15px); }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-30px); }
  60% { transform: translateY(-15px); }
}
.bounce {
  -webkit-animation-name: bounce;
  -moz-animation-name: bounce;
  -o-animation-name: bounce;
  animation-name: bounce;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
}

// BOUNCE UP
@-webkit-keyframes bounce-up {
  0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); }
  40% { -webkit-transform: translateY(15px); }
  60% { -webkit-transform: translateY(10px); }
}

@-moz-keyframes bounce-up {
  0%, 20%, 50%, 80%, 100% { -moz-transform: translateY(0); }
  40% { -moz-transform: translateY(30px); }
  60% { -moz-transform: translateY(15px); }
}

@-o-keyframes bounce-up {
  /* line 406, ../sass/_style.scss */
  0%, 20%, 50%, 80%, 100% { -o-transform: translateY(0); }
  40% { -o-transform: translateY(30px); }
  60% { -o-transform: translateY(15px); }
}

@keyframes bounce-up {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(30px); }
  60% { transform: translateY(15px); }
}

.bounce-up {
  -webkit-animation-name: bounce-up;
  -moz-animation-name: bounce-up;
  -o-animation-name: bounce-up;
  animation-name: bounce-up;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
}

/*THIRD BLOCK*/
.block-3{
    p{
        span{
            text-decoration:line-through;
        }
    }
}

/*SIXTH BLOCK*/
.block-6{
    p{
        span{color: $colorNectar;font-weight: 700;font-style: italic;}
    }
}

/*SEVENTH BLOCK*/
.block-7{
    span{
        color: $colorUno;
        text-decoration: line-through;
    }
}

/*EIGHTH BLOCK*/
.block-8{
    p{
        font-size: $fzDos !important;
    }
}

/*FOOTER*/
footer{
    background-color: rgba(250, 250, 250, 0.95);
    position: relative;
    z-index: 3;
    border-top: 1px solid #eee;
    padding: 20px 0;
    color: $colorUno;
    text-align: center;
    @include transition(0.5s);
    nav{
        ul{
            margin: 0;
            list-style: none;
            li{
                display: inline-block;
                a{
                    padding: 0 10px;
                    color: $colorUno;
                    font-size: 1em;
                    &:hover{color: #000;}
                }
            }
        }
    }
    img{
        margin: 20px 0;
    }
    p{
        margin: 0;
        font-size: 0.75em;
        a{color: $colorUno;&:hover{color: #000;}}
    }
}

/*POSTMARKETING*/
.postmarketing{
    text-align: center;
    margin: 160px 0 100px;
    p{font-size: $fzUno;line-height: 1.5em;a{color: $colorDos;}}

    .flip-board-wrapper{
        width: 100%;
        max-width: 1000px;
        margin: 30px auto 70px;
        .magazine{
            display: inline-block;
            width: 20%;
            padding: 5px;
            min-width: 160px;
        }
    }

    .orange-img{
        margin-bottom: 30px;
    }

    .antes{

        .block{
            padding: 60px 15px;
            img{
                max-width: 300px;
            }
        }
        .titulo{
            font-size: $fzDos;
            font-weight: 700;
            color: $colorDos;
            margin-bottom: 25px;
        }
        .desc{
            color: $colorDos;
            margin-bottom: 25px;
            line-height: 1.6;
            span{
                text-decoration: underline;
            }
        }
    }

    .prox{
        color: $colorUno;
        margin-bottom: 140px;
        span{
            font-size: 16px !important;
        }
    }
}
.servicios{
    text-align: center;
    margin: 160px 0 100px;
    .block{
        padding: 60px 15px 0;
    }
    .titulo{
        font-size: $fzDos;
        font-weight: 700;
        color: $colorNectar;
        margin-bottom: 25px;
    }
    .desc{
        color: $colorDos;
        margin-bottom: 25px;
        font-size: $fzUno;
        line-height: 1.6;
        span{
            text-decoration: underline;
        }
    }
}
/* CASOS */
.casos{
    text-align: center;
    margin: 160px 0 100px;

    .tags{
        display: block;
        margin: 70px 0 90px;
        padding: 0;
        list-style: none;

        li{
            display: inline-block;
            height: 24px;
            line-height: 24px;
            font-size: 1em;
            padding: 0 5px;
            margin: 0 5px;
            cursor: pointer;
            @include borderRadius(3px);
            @include transition(0.15s);

            &:hover{
                background-color: $colorNectar;
                color: #FFF;
            }
            &.active{
                background-color: $colorNectar;
                color: #FFF;
            }
            &.disabled{
                background-color: #eee;
                color: #ccc;
                cursor: default;
            }
        }
    }
}

/* CASO INDIVIDUAL */
.modal{
    display: none;
    position: fixed;
    z-index: 150;
    top: 50px;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(255,255,255,0.95);
    .modal-top{
        height: 50px;
        background-color: #F4F4F4;
        .navigation{
            float: left;
            height: 50px;
            font-size: 1.3125em;
            a{
                float: left;
                display: block;
                color: $colorDos;
                width: 70px;
                height: 50px;
                line-height: 50px;
                text-align:  center;
                @include transition(0.15s);
                &:hover{
                    color: $colorNectar;
                }
            }
            .vline{
                float: left;
                width: 1px;
                height: 24px;
                margin: 13px 0;
                border-left: 1px solid #DDD;
                @include boxSizing(border-box);
            }
        }
        p{
            display: none;
            float: left;
            margin: 0 0 0 5px;
            white-space: nowrap;
            height: 50px;
            line-height: 50px;
            font-size: 1.125em;
            span{
                font-style: italic;
            }
        }
        .close{
            display: block;
            float: right;
            width: 50px;
            height: 50px;
            line-height: 50px;
            font-size: 1.1875em;
            color: $colorDos;
            text-align:  center;
            @include transition(0.15s);
            &:hover{
                color: $colorNectar;
            }
        }
    }
    .modal-content{
        overflow-y: auto;
        position: absolute;
        top: 50px;
        left: 0;
        right: 0;
        bottom: 0;
        text-align: center;
        padding: 0 0 20px 0;
        .yt-container{
            position: relative;
            width: 100%;
            max-width: 750px;
            margin: 0 auto;
            .ratio-box{
                padding-top: 56.25%;
                width: 100%;
            }
            .container-box{
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
            }
        }
        h4{
            font-family: 'PT Serif', serif;
            font-weight: bold;
            font-size: 2em;
            color: $colorDos;
            margin: 35px 0 20px;
        }
        h5{
            font-family: 'PT Serif', serif;
            font-size: 1em;
            margin: 35px 0 10px;
        }
        .description{
            width: 100%;
            max-width: 620px;
            margin: 0 auto;
        }
        .tags{
            list-style: none;
            padding: 0;
            margin: 0 auto;
            width: 100%;
            max-width: 620px;
            li{
                display: inline-block;
                margin: 0 7px;
                a{
                    color: $colorDos;
                    text-decoration: underline;
                    @include transition(0.15s);
                    &:hover{
                        color: $colorNectar;
                    }
                }
            }
        }
        .premios{
            list-style: none;
            max-width: 620px;
            margin: 0 auto;
        }
    }
}
body.modal-on{
    overflow: hidden;
}

/* ISOTOPE */
#container{
    width: 240px;
    margin: 0 auto;

    .item{
        -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;    /* Firefox, other Gecko */
        box-sizing: border-box;         /* Opera/IE 8+ */
        display: block;
        margin: 10px;
        width: 220px;
        border: 1px solid #DDD;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        position: relative;
        img{
            display: block;
            width: 100%;
            height: auto;
        }
        .item-zocalo{
            background-color: #FFF;
            width: 100%;
            padding: 5px 15px;
            -webkit-border-bottom-right-radius: 4px;
            -webkit-border-bottom-left-radius: 4px;
            -moz-border-radius-bottomright: 4px;
            -moz-border-radius-bottomleft: 4px;
            border-bottom-right-radius: 4px;
            border-bottom-left-radius: 4px;
            p{
                font-size: 1em;
                color: $colorDos;
                text-align: left;
                margin: 0;
            }
        }
        .item-description{
            border-top: 1px solid #DDD;
            padding: 15px;
            h5{
                margin: 0;
                font-size: 16px;
                padding: 7px 0;
            }
        }
    }
}

.isotope-item {
    z-index: 2;
}

.isotope-hidden.isotope-item {
    pointer-events: none;
    z-index: 1;
}
.isotope,
.isotope .isotope-item {
    /* change duration value to whatever you like */
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -ms-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
}

.isotope {
    -webkit-transition-property: height, width;
    -moz-transition-property: height, width;
    -ms-transition-property: height, width;
    -o-transition-property: height, width;
    transition-property: height, width;
}

.isotope .isotope-item {
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property:    -moz-transform, opacity;
    -ms-transition-property:     -ms-transform, opacity;
    -o-transition-property:      -o-transform, opacity;
    transition-property:         transform, opacity;
}

@media (min-width: 480px){
    #container{
        width: 480px;
    }

}

@media (min-width: 640px){
		.arrow {
			display: block;
		}
}

@media (min-width: 720px){
    #container{
        width: 720px;
    }
}

@media (min-width: 960px){
    #container{
        width: 960px;
    }
}

@media (min-width: 1200px){
    #container{
        width: 1200px;
    }
}

@import "medias";
